<script setup lang="ts">
import LoginLayout from '@/components/login-layout.vue'

import AccountLoginForm from './account-login-form.vue'
import MobileLoginForm from './mobile-login-form.vue'

const { push } = useRouter()

const activeForm = ref<number>(1)

function forgetPassword() {
    push('/forget-password')
}

function goToRegister() {
    push('/register')
}
</script>

<template>
    <LoginLayout>
        <div class="custom-shadow px-50 pb-30 pt-50 ml-100 bg-white rd-8 flex flex-col relative w-500 of-hidden justify-center">
            <div class="absolute size-80 cursor-pointer right-0 top-0"
                 @click="goToRegister"
            >
                <div class="b-l-80 b-t-80 b-transparent b-t-red b-solid absolute size-0 z-0" />

                <div class="text-14 text-white font-500 absolute right-12 top-12 z-100">
                    注册
                </div>
            </div>

            <div class="mx-auto text-20 text-gray-500 flex items-center">
                <span :class="`cursor-pointer ${activeForm === 1 && 'text-brand-red'}`"
                      @click="activeForm = 1"
                >
                    密码登录
                </span>

                <div class="mx-16 bg-black/10 h-16 w-1" />

                <span :class="`cursor-pointer ${activeForm === 2 && 'text-brand-red'}`"
                      @click="activeForm = 2"
                >
                    验证码登录
                </span>
            </div>

            <div class="mt-20">
                <AccountLoginForm v-if="activeForm === 1" />

                <MobileLoginForm v-else />

                <ElButton type="primary"
                          link
                          class="text-center w-full"
                          @click="forgetPassword"
                >
                    忘记密码？
                </ElButton>
            </div>

            <div class="triangle absolute right-0 top-0" />
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
.custom-shadow {
    box-shadow: 15px -5px 30px 0 rgb(0 0 0 / 20%);
}
</style>
